<template>
<!-- 订单管理 fys -->
    <div id="OrderManager">
        <div class="pd05">
            <span class="ico_tips2"></span>
            <font color="black">&nbsp;&nbsp;&nbsp;您可以在线查看近一年订单，如需查找更久之前的订单，请至易游app或致电17744582985</font>
        </div>
        <div class="order_tab_box">
            <el-tabs v-model="activeName"  @tab-click="getOredrByPage()">
                <!-- 全部订单 -->
                <el-tab-pane label="全部订单" name="0">        
                    <div class="order_head_01">
                        <ul class="ul_head_01">
                            <li>
                                <span style="line-height:40px;color: #666;font-size:12px;">订单号</span>
                            </li>
                            <li style="margin-left:10px;">
                                <el-input v-model="orderNumber" placeholder="" style="width:250px;"></el-input>
                            </li>
                            <li>
                                <span style="line-height:40px;color: #666;font-size:12px;">旅客</span>
                            </li>
                            <li style="margin-left:10px;">
                                <el-input v-model="passenger" placeholder=""  style="width:250px;"></el-input>
                            </li>
                            <li style="margin-left:20px;">
                                <el-button type="primary" style="width:80px;" @click="getOredrByName()">按钮</el-button>
                            </li>
                        </ul>
                    </div>
                    <div class="t_body" v-for="(orders,index) in orders" :key="index">
                        <ul>
                            <li class="item" id="Train_Detail_17935312640">
                                <h3>
                                    <!-- <label class="base_label" for="checkbox_17935312640"><input type="checkbox" id="checkbox_17935312640" name=""></label> -->
                                    <span role="presentation" class="ilb mr20">订单号：
                                        <span class="card-order-id order-btn">{{orders.orderNo}}</span>
                                    </span>
                                    <span class="ilb mr20" style="margin-left:10px;">下单时间：{{orders.purchaseTime}}</span>
                                </h3>
                            </li>
                        </ul>
                        <div role="presentation" class="order-items">
                            <div class="order-info clearfix">
                                <ul class="order-item">
                                    <li class="order-item-title">
                                        <span style="color: black;font-size:20px;">{{orders.scenicName}}</span>
                                    </li>
                                    <li class="order-item-txt">
                                        <span>使用时间：{{orders.startTime}}</span></li><li class="order-item-txt">
                                        <span>数量：{{orders.ticketNum}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="order-price-group">
                                <div class="order-price-detail" style="float:left;font-size: 24px;font-weight: bold;color:#3366CC">
                                    <div class="order-price-num">¥&nbsp;{{orders.price}} </div>
                                </div>
                                <div class="order-price-status" style="float:left;">
                                    <div class="order-price-status-title">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
                                </div>
                                <div class="order-price-status" style="float:left;">
                                    <div v-for="item in orderStatusList" :key="item.id">
                                        <span v-if="item.id == orders.orderStatus">{{item.status}}</span>
                                    </div>
                                </div>
                                <div class="order-price-status" style="margin-top:30px">
                                    <el-link @click="openOrderDetail(orders.id)" type="primary">查看详情</el-link><br>
                                </div>
                            </div>
                            <el-button class="payNow" v-if="orders.orderStatus == '5'" @click="payNow(orders.qrCode, orders.scenicName, orders.orderNo, orders.price)" type="warning">立即支付</el-button>
                        </div>
                    </div>
                    <div class="block block1">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage3"
                        :page-sizes="[3, 5, 7]"
                        :page-size="3"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="未出行" name="1">        
                    <div class="order_head_01">
                        <ul class="ul_head_01">
                            <li>
                                <span style="line-height:40px;color: #666;font-size:12px;">订单号</span>
                            </li>
                            <li style="margin-left:10px;">
                                <el-input v-model="orderNumber" placeholder="" style="width:250px;"></el-input>
                            </li>
                            <li>
                                <span style="line-height:40px;color: #666;font-size:12px;">旅客</span>
                            </li>
                            <li style="margin-left:10px;">
                                <el-input v-model="passenger" placeholder=""  style="width:250px;"></el-input>
                            </li>
                            <li style="margin-left:20px;">
                                <el-button type="primary" style="width:80px;" @click="getOredrByName()">按钮</el-button>
                            </li>
                        </ul>
                    </div>
                    <div class="t_body" v-for="(orders,index) in orders" :key="index">
                        <ul>
                            <li class="item" id="Train_Detail_17935312640">
                                <h3>
                                    <!-- <label class="base_label" for="checkbox_17935312640"><input type="checkbox" id="checkbox_17935312640" name=""></label> -->
                                    <span role="presentation" class="ilb mr20">订单号：
                                        <span class="card-order-id order-btn">{{orders.orderNo}}</span>
                                    </span>
                                    <span class="ilb mr20" style="margin-left:10px;">下单时间：{{orders.purchaseTime}}</span>
                                </h3>
                            </li>
                        </ul>
                        <div role="presentation" class="order-items">
                            <div class="order-info clearfix">
                                <ul class="order-item">
                                    <li class="order-item-title">
                                        <span style="color: black;font-size:20px;">{{orders.scenicName}}</span>
                                    </li>
                                    <li class="order-item-txt">
                                        <span>使用时间：{{orders.startTime}}</span></li><li class="order-item-txt">
                                        <span>数量：{{orders.ticketNum}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="order-price-group">
                                <div class="order-price-detail" style="float:left;font-size: 24px;font-weight: bold;color:#3366CC">
                                    <div class="order-price-num">¥&nbsp;{{orders.price}} </div>
                                </div>
                                <div class="order-price-status" style="float:left;">
                                    <div class="order-price-status-title">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
                                </div>
                                <div class="order-price-status" style="float:left;">
                                    <div class="order-price-status-title">{{orders.orderStatus == 1?"未出行" :orders.orderStatus == 2?"未评论" :"未支付"}}</div>
                                    <template slot-scope="scope"><p>{{scope.row.orders.orderStatus===1?"已支付" :"已取消"}}</p></template>
                                </div>
                                <div class="order-price-status" style="margin-top: 30px;">
                                    <el-link @click="openOrderDetail(orders.id)" type="primary">查看详情</el-link>
                                </div>
                            </div>
                        </div>         
                    </div>
                    <div class="block block1">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage3"
                        :page-sizes="[3, 5, 7]"
                        :page-size="3"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="未评论" name="2">        
                    <div class="order_head_01">
                        <ul class="ul_head_01">
                            <li>
                                <span style="line-height:40px;color: #666;font-size:12px;">订单号</span>
                            </li>
                            <li style="margin-left:10px;">
                                <el-input v-model="orderNumber" placeholder="" style="width:250px;"></el-input>
                            </li>
                            <li>
                                <span style="line-height:40px;color: #666;font-size:12px;">旅客</span>
                            </li>
                            <li style="margin-left:10px;">
                                <el-input v-model="passenger" placeholder=""  style="width:250px;"></el-input>
                            </li>
                            <li style="margin-left:20px;">
                                <el-button type="primary" style="width:80px;" @click="getOredrByName()">按钮</el-button>
                            </li>
                        </ul>
                    </div>
                    <div class="t_body" v-for="(orders,index) in orders" :key="index">
                        <ul>
                            <li class="item" id="Train_Detail_17935312640">
                                <h3>
                                    <!-- <label class="base_label" for="checkbox_17935312640"><input type="checkbox" id="checkbox_17935312640" name=""></label> -->
                                    <span role="presentation" class="ilb mr20">订单号：
                                        <span class="card-order-id order-btn">{{orders.orderNo}}</span>
                                    </span>
                                    <span class="ilb mr20" style="margin-left:10px;">下单时间：{{orders.purchaseTime}}</span>
                                </h3>
                            </li>
                        </ul>
                        <div role="presentation" class="order-items">
                            <div class="order-info clearfix">
                                <ul class="order-item">
                                    <li class="order-item-title">
                                        <span style="color: black;font-size:20px;">{{orders.scenicName}}</span>
                                    </li>
                                    <li class="order-item-txt">
                                        <span>使用时间：{{orders.startTime}}</span></li><li class="order-item-txt">
                                        <span>数量：{{orders.ticketNum}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="order-price-group">
                                <div class="order-price-detail" style="float:left;font-size: 24px;font-weight: bold;color:#3366CC">
                                    <div class="order-price-num">¥&nbsp;{{orders.price}} </div>
                                </div>
                                <div class="order-price-status" style="float:left;">
                                    <div class="order-price-status-title">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
                                </div>
                                <div class="order-price-status" style="float:left;">
                                    <div class="order-price-status-title">{{orders.orderStatus == 1?"未出行" :orders.orderStatus == 2?"未评论" :"未支付"}}</div>
                                    <template slot-scope="scope"><p>{{scope.row.orders.orderStatus===1?"已支付" :"已取消"}}</p></template>
                                </div>
                                <div class="order-price-status" style="margin-top: 30px;">
                                    <el-link @click="openOrderDetail(orders.id)" type="primary">查看详情</el-link>
                                </div>
                            </div>
                        </div>         
                    </div>
                    <div class="block block1">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage3"
                        :page-sizes="[3, 5, 7]"
                        :page-size="3"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="未支付" name="5">        
                    <div class="order_head_01">
                        <ul class="ul_head_01">
                            <li>
                                <span style="line-height:40px;color: #666;font-size:12px;">订单号</span>
                            </li>
                            <li style="margin-left:10px;">
                                <el-input v-model="orderNumber" placeholder="" style="width:250px;"></el-input>
                            </li>
                            <li>
                                <span style="line-height:40px;color: #666;font-size:12px;">旅客</span>
                            </li>
                            <li style="margin-left:10px;">
                                <el-input v-model="passenger" placeholder=""  style="width:250px;"></el-input>
                            </li>
                            <li style="margin-left:20px;">
                                <el-button type="primary" style="width:80px;" @click="getOredrByName()">按钮</el-button>
                            </li>
                        </ul>
                    </div>
                    <div class="t_body" v-for="(orders,index) in orders" :key="index">
                        <ul>
                            <li class="item" id="Train_Detail_17935312640">
                                <h3>
                                    <!-- <label class="base_label" for="checkbox_17935312640"><input type="checkbox" id="checkbox_17935312640" name=""></label> -->
                                    <span role="presentation" class="ilb mr20">订单号：
                                        <span class="card-order-id order-btn">{{orders.orderNo}}</span>
                                    </span>
                                    <span class="ilb mr20" style="margin-left:10px;">下单时间：{{orders.purchaseTime}}</span>
                                </h3>
                            </li>
                        </ul>
                        <div role="presentation" class="order-items">
                            <div class="order-info clearfix">
                                <ul class="order-item">
                                    <li class="order-item-title">
                                        <span style="color: black;font-size:20px;">{{orders.scenicName}}</span>
                                    </li>
                                    <li class="order-item-txt">
                                        <span>使用时间：{{orders.startTime}}</span></li><li class="order-item-txt">
                                        <span>数量：{{orders.ticketNum}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="order-price-group">
                                <div class="time"><i class="el-icon-time"></i> {{min}}分钟 {{sec}}秒 </div>
                                <div class="order-price-detail" style="float:left;font-size: 24px;font-weight: bold;color:#3366CC">
                                    <div class="order-price-num">¥&nbsp;{{orders.price}} </div>
                                </div>
                                <div class="order-price-status" style="float:left;">
                                    <div class="order-price-status-title">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
                                </div>
                                <div class="order-price-status" style="float:left;">
                                    <div class="order-price-status-title">{{orders.orderStatus == 1?"未出行" :orders.orderStatus == 2?"未评论" :"未支付"}}</div>
                                    <template slot-scope="scope"><p>{{scope.row.orders.orderStatus===1?"已支付" :"已取消"}}</p></template>
                                </div>
                                <div class="order-price-status" style="margin-top: 30px;">
                                    <el-link @click="openOrderDetail(orders.id)" type="primary">查看详情</el-link>
                                </div>
                            </div>
                            <el-button class="payNow" @click="payNow(orders.qrCode, orders.scenicName, orders.orderNo, orders.price)" type="warning">立即支付</el-button>
                        </div>
                    </div>
                    <div class="block block1">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage3"
                        :page-sizes="[3, 5, 7]"
                        :page-size="3"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                        </el-pagination>
                    </div> 
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
const axios = require('axios')
export default {
    data () {
        return {
            // 获取当前账号的登录名
            loginName: "",
            currentPage3: 1,
            page:{
                //条数
                pageSize:3,
                //页数
                pageNum:1,
                total:0
            },
            // 标签页根据 数值 对应 el-tab-pane 的 name 显示默认页
            activeName: '0',
            orderNumber: '',
            passenger: '',
            // 全部订单存放
            orders: [],
            // 存放订单状态列表
            orderStatusList: [],
            tabName: null,
            // 订单失效时间
            endTime: null,
            day: null,
            hr: null,
            min: null,
            sec: null
        }
    },
    mounted () {
        //获取页头用户数据loginName
        this.loginName = window.sessionStorage.getItem('loginName')
        // 初始化全部订单
        this.getOredrByPage()
        // 初始化订单状态列表
        this.getOrderStatusList()
    },
    methods: {
        //倒计时
        countdown (endTime) {
            const end = Date.parse(new Date('2022-08-26 11:00:00'))
            const now = Date.parse(new Date())
            const msec = end - now

            if(msec<0) return;

            let day = parseInt(msec / 1000 / 60 / 60 / 24)
            let hr = parseInt(msec / 1000 / 60 / 60 % 24)
            let min = parseInt(msec / 1000 / 60 % 60)
            let sec = parseInt(msec / 1000 % 60)
            this.day = day
            this.hr = hr > 9 ? hr : '0' + hr
            this.min = min > 9 ? min : '0' + min
            this.sec = sec > 9 ? sec : '0' + sec
            const that = this
            if(min>=0 && sec>=0){
                //倒计时结束关闭订单
                if(min==0 && sec==0){

                    return
                }
                setTimeout(function () {
                that.countdown()
                }, 1000)
            }
        },
        // 点击查看详情的链接
        openOrderDetail (id) {
            this.$router.push({name:'OrderDetail', query: {id: id}})
        },
        // 触发立即支付按钮
        payNow (qrCode,scenicName,code,price) {
            this.$router.push({name : 'Alipay', query:{scenicName: scenicName, code: code, price: price, qrCode: qrCode}})
        },
        handleSizeChange(ps) {
            this.page.pageSize=ps;
            this.getOredrByPage()
        },
        handleCurrentChange(pn) {
            this.page.pageNum=pn;
            this.getOredrByPage()
        },
        //订单信息分页查询全部
        getOredrByPage () {
            if (this.tabName !== this.activeName) {
                this.page = {
                    //条数
                    pageSize:3,
                    //页数
                    pageNum:1,
                    total:0
                }
            }
            axios.get('http://127.0.0.1:8082/orders/ScenicOrders/getScenicOredr', {
                params: {
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum,
                    loginName: this.loginName,
                    orderStatus: this.activeName
                }
            })
            .then((res) => {
                this.orders = res.data.obj.content
                this.page.total = res.data.obj.total
                this.tabName = this.activeName
            })
        },
        // 获取订单状态列表
        getOrderStatusList () {
            this.$axios.get('http://127.0.0.1:8082/orders/ScenicOrders/getOrderStatusList')
            .then(res =>{
                this.orderStatusList = res.data.obj
            })
        }
    }
}
</script>
<style scoped>
.block1{
    float:left;
    margin-top: 10px;
}
#OrderManager {
    width: 1200px;
    height: 1000px;
    margin-left: 235px;
    margin: 0 auto;
}
.pd05{
    height: 35px;
    line-height: 35px;
    border: 1px solid #ccc;
}
.order_tab_box{
    position: relative;
    height: 39px;
    margin-top: 20px;
}
.order_tab{
    height: 39px;
}
.order_tab a {
    float: left;
    margin-right: 5px;
    width: 138px;
    height: 37px;
    line-height: 37px;
    border: 2px solid #ccc;
    border-bottom: 0 none;
    font-family: Microsoft Yahei;
    font-size: 18px;
    color: #666;
    text-align: center;
}
.order_tab a:onClick{
    border: 2px solid #2577e3;
    border-bottom: 2px solid white;
}
.order_head{
    width: 1010px;
    height: 50px;
    float: left;
    margin-top: 10px;
}
.ul_head{
    list-style: none;
}
.ul_head_01{
    list-style: none;
}
.ul_head li{
    float: left;
}
.ul_head_01 li{
    float: left;
    margin-left: 20px;
}
.select-box {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 14px;
    font-size: 13px;
    color: #666;
}
.dropdown {
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}
.order_head_01{
    width: 1100px;
    margin-top: 20px;
}
.t_body {
    width: 1180px;
    height: 170px;
    border: 1px solid #DDDDDD;
    margin-top: 20px;
    margin-left: 10px;
    padding: 0%;
    float: left;
    position: relative;
    overflow: hidden;
}
.t_body ul {
    margin-top: 1%;
    padding: 0%;
    float: left;
    margin-left: 20px;
    list-style: none;
    height: 20px;
}
.item{
    color: black;
    font-size: 12px;
}
.order-items{
    width: 990px;
    height: 150px;
    float: left;
}
.order-item{
    text-align: left;
    line-height: 30px;
}
.order-item li{
    color: rgb(95, 81, 81);
    margin-top: 10px;
}
.order-price-group{
    float:right;
    line-height:20px;
    text-align: center;
    position: absolute;
    bottom: 60px;
    right: 30px;
    overflow: hidden;
}
.payNow{
    width: 180px;
    position: absolute;
    bottom: 0px;
    right: 0px;
}
</style>
